import React, { useEffect, useState } from "react";
import requewt from "@/utils/requewt";
import { API } from "@/config";
import callFeedback from "@/components/common/modalFeedback";
import { isValidArr, navigateTo, triggerAppShare } from "@/utils";
import { Button, Modal, DotLoading, Toast } from "antd-mobile";
import useApp from "@/stores/useApp";

const compName = "stuff";
const klassName = compName.replace(/\./g, '-');

export default function Comp() {
  const [data, setData] = useState(undefined);
  const [loading, setLoading] = useState(false);
  const [remain, setRemain] = useState(0);
  const updateShareVisible = useApp(state => state.updateShareVisible)
  const env = useApp(state => state.env)

  useEffect(() => {
    (async () => {
      await handler.remain()
      await handler.fetch()
    })()
  }, [])

  const handler = {
    remain: async () => {
      setLoading(true);
      const resp = await requewt(API.game.remain);
      setTimeout(() => setLoading(false), 300);
      if (resp?.error_code !== 0) {
        await callFeedback({title: resp?.msg || `请求失败`});
        return;
      }
      setRemain(resp?.data);
    },
    fetch: async () => {
      setLoading(true)
      const resp = await requewt(API.stuff.entire);
      console.log(`resp`, resp)
      setTimeout(() => setLoading(false), 800);
      if (resp?.error_code !== 0) {
        await callFeedback({title: resp?.msg || `请求失败`});
        return;
      }
      setData(resp?.data);
    },
    share: async () => {
      if (env === `app`) await triggerAppShare()
      else if (env === `mini`) {
        updateShareVisible(true)
      } else {
        Toast.show({content: `请在APP或小程序内打开`})
      }

      const resp = await requewt(API.stuff.share);
      if (resp?.error_code !== 0) return;
      setTimeout(() => {
        handler.fetch()
        Toast.show({content: `分享成功`});
      }, 6000)

    },
    use: async () => {
      Modal.confirm({
        title: `提示`,
        content: `确定使用吗？`,
        onConfirm: async () => {
          const options = {
            method: `POST`,
            headers: {
              'Content-Type': 'multipart/form-data'
            },
            body: {props_id: 4}
          }
          const resp = await requewt(API.stuff.use, options);
          if (resp?.error_code !== 0) return;
          await handler.fetch()
          Toast.show({content: `使用成功`});
        }
      })
    }
  }

  const STATUS_MAP = {
    1: {
      title: `未获取`,
      key: 1,
      action: <>未获取</>
    },
    2: {
      title: `已获取`,
      key: 2,
      action: <>已获取</>
    },
    3: {
      title: `已使用`,
      key: 3,
      action: <>已使用</>
    },
    4: {
      title: `分享`,
      key: 4,
      action: <><Button className="act-btn act-btn-bevel" onClick={handler.share} size={`small`}
                        shape={`rounded`}>分享</Button></>
    },
    5: {
      title: `使用`,
      key: 5,
      action: <><Button onClick={handler.use} className="act-btn act-btn-bevel" size={`small`}
                        shape={`rounded`}>使用</Button></>
    }
  }


  return (
    <div className={`cp-${klassName}`}>
      <div className="inner">
        <h2 className="header">我的道具</h2>
        <div className="content">
          {
            loading ? <div className="text-center">
                <DotLoading color='primary' />
              </div>
              :
              isValidArr(data) ?
                data?.map((item, index) => {
                  return (
                    <div className="stuff-item" key={index}>
                      <div className="inner">
                        <div className="part left">
                          <div className="title">{item?.name}</div>
                          <div className="subtitle">{item?.condition_intro}</div>
                          <div className="desc">{item?.intro}</div>
                        </div>
                        <div className="part right">
                          {
                            STATUS_MAP[item?.status]?.action
                          }

                        </div>
                      </div>
                    </div>
                  )
                })
                :
                <div className="text-center">无</div>
          }
        </div>
        <div className="footer">
          <div className="inner">
            <Button shape={`rounded`}
                    loading={loading}
                    className="act-btn act-btn-bevel"
                    onClick={e => Modal.clear()}
            >
              返回首页
            </Button>
            <Button shape={`rounded`}
                    loading={loading}
                    className="act-btn act-btn-bevel"
                    onClick={e => {
                      if (remain > 0) {
                        navigateTo(`/game`)
                      } else {
                        Toast.show({content: `今日游戏次数已用完`})
                      }
                    }}
            >
              前往游戏
            </Button>
          </div>
          <p>所有道具卡每周仅可获取一次，限当周有效</p>
        </div>
      </div>
    </div>
  )
}